
import { ref } from 'vue'

let v = ref<string>('')

let flag:boolean = true

let arr:number[] = [1, 2, 3, 4, 5]

// Props接受父组件传参
type Props = {
    title: string
}

// 这个函数的参数，跟setup类似
const readerDom = (props: Props, ctx: any) => {
    return (
        <div>
            <div>
                {/* 这样接收传值， 跟react 有点区别 */}
                Hello Tsx {props.title}
            </div>
            <div>
                <input type="text" v-model={v.value} />
                <div>{v.value}</div>
            </div>
            <div>
                {/* v-show是支持的 */}
                <div v-show={flag}>景天</div>
                <div v-show={!flag}>雪见</div>
                {/* 页面上全都消失了，不支持v-if */}
                {/* <div v-if={flag}>景天</div>
                <div v-if={!flag}>雪见</div> */}
                {/* 换一种方式， 编程思想， react 里熟悉 */}
                { flag ? <div>景天</div> : <div>雪见</div>}
            </div>
            <div>
                {/* 不支持v-for */}
                {/* v-bind也是不支持的，直接写属性: 例如 data-index */}
                {
                    arr.map(v => {
                        return (<div data-index={v}>{v}</div>)
                    })
                }
            </div>
            <div>
                {/* v-on也不支持， 使用驼峰式 */}
                {/* 使用ctx 里的emit 方法向父组件传参 */}
                {
                    arr.map(v => {
                        // return (<div onClick={check}>${v}</div>)
                        // return (<div onClick={check.bind(this, v)}>${v}</div>)
                        return (<div onClick={check.bind(this, ctx)}>${v}</div>)
                    })
                }
            </div>
        </div>
    )
}

// const check = () => {
//     console.log("点了一下");
// }
// 传参 
// const check = (v: number) => {
//     console.log("点了一下", v);
// }

// 向父组件传值
const check = (ctx: any) => {
    
    ctx.emit("on-click", 123)
}

export default readerDom


/*
    Tsx和template的一些区别
        tsx里变量需要手动去提取value , template里会自动提取
        tsx 响应式属性值需要使用 {} , template里是 ""
        tsx 标签里的变量值时 单个 {}， template 里是 {{}}  
        tsx 里很多命令不支持， 事件修饰符也不支持，需要在事件函数里通过 event 去写
*/